import FormItem from "@/components/Cform/formItem.vue";
import { useDrag } from "@/store/modules/drag";
import { deepClone } from "@/assets/utils/deepClone";

let formProp = [
  { label: "itemKey", type: "input", tip: "key", key: "itemKey", editType: "normalProp" },
  { type: "input", label: "label", key: "label", propKey: ["item"], editType: "normalProp", tip: "标签名" },
  { label: "itemValue", type: "input", tip: "value", key: "itemValue", editType: "normalProp" },
  { type: "radio", label: "refresh", key: "refresh", propKey: ["item"], editType: "lessNormalProp", tip: "是否刷新" },
  { type: "radio", label: "hide", key: "hide", propKey: ["item"], editType: "prop", tip: "是否隐藏" },
  { type: "radio", label: "hasrules", key: "hasrules", propKey: ["item"], editType: "lessNormalProp", tip: "是否有校验规则" },
  { type: "input", label: "tip", key: "tip", propKey: ["item"], editType: "lessNormalProp", tip: "提示" },
  { type: "radio", label: "notHandleArray", key: "notHandleArray", propKey: ["item"], editType: "prop", tip: "数组是否需处理" },
  { type: "number", label: "span", key: "span", propKey: ["item"], editType: "prop", tip: "小于24宽度" },
  { type: "textarea", label: "formStyle", key: "formStyle", propKey: ["item"], editType: "prop", tip: "formItem样式" },
  { type: "input", label: "rules", key: "rules", propKey: ["item"], editType: "prop", tip: "自定义校验规则" },
  { type: "input", label: "otherRules", key: "otherRules", propKey: ["item"], editType: "prop", tip: "除必传校验外规则" }
];
function formItemCreate({ props, settingRender, label, otherPreview = null, key, previewProps = undefined }) {
  let leftProps = previewProps ? previewProps : deepClone(props);
  leftProps.item.formStyle = JSON.stringify({ margin: 0, fontSize: "12px" });
  const dragStore = useDrag();
  return {
    key,
    type: "formItem",
    leftOpt: { label, preview: otherPreview || <FormItem {...leftProps}></FormItem> },
    middleOpt: {
      render: <FormItem></FormItem>,
      props: props,
      methods: {
        changeRadio: (e) => {
          let { parent } = dragStore.clickParent;
          dragStore.refList[parent.highEdit.ref].dataed.cFormRef.form[e.key] = e.e;
        }
      }
    },
    rightOpt: { settingRender: [...formProp, ...settingRender] }
  };
}
function dateFormType({ type, propsLabel, key, label }) {
  return formItemCreate({
    props: {
      item: {
        type: type,
        label: propsLabel
      },
      // itemValue,
      itemKey: String(new Date().getTime())
    },
    settingRender: [
      { type: "input", tip: "默认时间", key: "defaultTime", propKey: ["item"], label: "defaultTime", editType: "normalProp" },
      { type: "input", tip: "value格式", key: "format", propKey: ["item"], label: "format", editType: "normalProp" }
      // { type: "textarea", tip: "设置快捷选项", key: "shortcuts", isObj: true, propKey: ["item"], label: "shortcuts", editType: "prop" }
    ],
    key,
    label
  });
}
function fileFormType(type, label, key) {
  return formItemCreate({
    props: { item: { type: type, label: "标题" }, itemKey: String(new Date().getTime()) },
    settingRender: [xlsx,.xls
      { type: "input", tip: "文件上传后的触发emit('otherGetFileFn', { e, props });", propKey: ["item", "otherGetFile"], label: "otherGetFile", editType: "prop" },
      { type: "input", tip: "最多上传几个", propKey: ["item", "limit"], label: "limit", editType: "prop" },
      { type: "input", tip: "接受哪些文件后缀，比如：xlsx,.xls", propKey: ["item", "fileFormType"], label: "fileFormType", editType: "prop" },
    ],
    key,
    label: label
  });
}
export default function initContainer(registerConfig) {
  registerConfig.register(
    formItemCreate({
      props: { itemKey: String(new Date().getTime()), item: { type: "input", label: "标题" } },
      settingRender: [
        { label: "otherType", type: "input", key: "otherType", tip: "当使用el-input的非input类型时的type", propKey: ["item"], editType: "prop" },
        { label: "placeholder", type: "input", key: "placeholder", tip: "提示", propKey: ["item"], editType: "prop" },
        { label: "disabled", type: "radio", key: "disabled", tip: "禁用", propKey: ["item"], editType: "prop" },
        { label: "maxlength", type: "input", key: "maxlength", tip: "最大输入长度", propKey: ["item"], editType: "prop" },
        { label: "showWordLimit", type: "input", key: "showWordLimit", tip: "是否显示统计字数, 只在 type 为 'text' 或 'textarea' 的时候生效", propKey: ["item"], editType: "prop" },
        { label: "rows", type: "number", key: "rows", tip: "输入框行数，仅 type 为 'textarea' 时有效", propKey: ["item"], editType: "prop" },
        { label: "autosize", type: "input", key: "autosize", tip: "	textarea 高度是否自适应，仅 type 为 'textarea' 时生效。 可以接受一个对象，比如: { minRows: 2, maxRows: 6 }", propKey: ["item"], editType: "prop" },
        { label: "showPassword", type: "radio", key: "showPassword", tip: "显示密码", propKey: ["item"], editType: "prop" }
      ],
      label: "Input 输入框",
      key: "cFormInput"
    })
  );
  registerConfig.register(
    formItemCreate({
      previewProps: {
        item: {
          type: "select",
          label: "标题",
          values: [
            { name: "a", id: 1 },
            { name: "b", id: 2 }
          ]
        },
        itemKey: String(new Date().getTime())
      },
      props: { item: { type: "select", label: "标题" }, itemKey: String(new Date().getTime()) },
      settingRender: [
        {
          type: "valueKeyList",
          tip: "选项的键值对",
          label: "values",
          editType: "normalProp",
          propKey: ["item"],
          key: "values",
          valueKeyList: [
            [
              { type: "input", tip: "选项的标签", key: "name", propKey: ["item", "values"], label: "name", editType: "prop" },
              { type: "input", tip: "选项的值", key: "id", propKey: ["item", "values"], label: "id", editType: "prop" }
            ]
          ]
        },
        { type: "input", tip: "values获取的接口", key: "url", propKey: ["item"], label: "url", editType: "normalProp" },
        { type: "radio", tip: "传入的values的每个项是自己", key: "nolabel", propKey: ["item"], label: "nolabel", editType: "lessNormalProp" },
        { type: "input", tip: "获取values的接口的query", key: "params", propKey: ["item"], label: "params", editType: "lessNormalProp" },
        { type: "input", tip: "取数组的什么字段作为显示", key: "name", propKey: ["item"], label: "name", editType: "normalProp" },
        { type: "input", tip: "取数组的什么字段作为值", key: "aid", propKey: ["item"], label: "aid", editType: "normalProp" },
        { type: "radio", tip: "是否多选", key: "multiple", propKey: ["item"], label: "multiple", editType: "normalProp" },
        { type: "radio", tip: "是否可以创造选项", key: "allowCreate", propKey: ["item"], label: "allowCreate", editType: "prop" },
        { type: "input", tip: "提示", key: "placeholder", propKey: ["item"], label: "placeholder", editType: "prop" },
        { type: "input", tip: "样式", key: "style", propKey: ["item"], label: "style", editType: "prop" },
        { type: "radio", tip: "是否禁用", key: "disabled", propKey: ["item"], label: "disabled", editType: "prop" },
        { type: "radio", tip: "是否远程搜索", key: "remote", propKey: ["item"], label: "remote", editType: "prop" },
        { type: "radio", tip: "是否在输入框按下回车时，选择第一个匹配项。 需配合 filterable 或 remote 使用", key: "defaultFirstOption", propKey: ["item"], label: "defaultFirstOption", editType: "prop" }
      ],
      key: "cFormSelect",
      label: "Select 选择器"
    })
  );
  registerConfig.register(
    formItemCreate({
      previewProps: {
        item: {
          type: "checkbox",
          label: "标题",
          values: [
            { name: "a", id: 1 },
            { name: "b", id: 2 }
          ]
        },
        itemValue: [1],
        itemKey: String(new Date().getTime())
      },
      props: { item: { type: "checkbox", label: "标题" },  itemKey: String(new Date().getTime()) },
      settingRender: [
        {
          type: "valueKeyList",
          tip: "选项的键值对",
          label: "values",
          editType: "normalProp",
          propKey: ["item"],
          key: "values",
          valueKeyList: [
            [
              { type: "input", tip: "选项的标签", key: "name", propKey: ["item","values"], label: "name", editType: "prop" },
              { type: "input", tip: "选项的值", key: "id", propKey: ["item","values"], label: "id", editType: "prop" }
            ]
          ]
        },
        { type: "input", tip: "取数组的什么字段作为显示", key: "name", propKey: ["item"], label: "name", editType: "normalProp" },
        { type: "input", tip: "取数组的什么字段作为值", key: "aid", propKey: ["item"], label: "aid", editType: "normalProp" },
        { type: "radio", tip: "传入的values的每个项是自己", key: "nolabel", propKey: ["item"], label: "nolabel", editType: "prop" },
        { type: "radio", tip: "是否禁用", key: "disabled", propKey: ["item"], label: "disabled", editType: "prop" }
      ],
      key: "cFormCheckbox",
      label: "Checkbox 多选框"
    })
  );
  registerConfig.register(
    formItemCreate({
      previewProps: {
        item: {
          type: "radio",
          label: "标题",
          values: [
            { name: "a", id: 1 },
            { name: "b", id: 2 }
          ]
        },
        itemValue: "1",
        itemKey: String(new Date().getTime())
      },
      props: {
        item: {
          type: "radio",
          label: "标题"
        },
        itemKey: String(new Date().getTime())
      },
      settingRender: [
        { type: "input", tip: "取数组的什么字段作为显示", key: "name", propKey: ["item"], label: "name", editType: "normalProp" },
        { type: "input", tip: "取数组的什么字段作为值", key: "aid", propKey: ["item"], label: "aid", editType: "normalProp" },
        { type: "input", tip: "获取values的接口", key: "url", propKey: ["item"], label: "url", editType: "prop" },
        { type: "input", tip: "获取values的接口的query", key: "params", propKey: ["item"], label: "params", editType: "prop" },
        {
          type: "valueKeyList",
          tip: "选项的键值对",
          label: "values",
          editType: "normalProp",
          propKey: ["item"],
          key: "values",
          valueKeyList: [
            [
              { type: "input", tip: "选项的标签", key: "name", propKey: ["item","values"], label: "name", editType: "prop" },
              { type: "input", tip: "选项的值", key: "id", propKey: ["item","values"], label: "id", editType: "prop" }
            ]
          ]
        },
        { type: "radio", tip: "传入的values的每个项是自己", key: "nolabel", propKey: ["item"], label: "nolabel", editType: "prop" },
        { type: "input", tip: "获取values的接口返回的是对象", key: "valueType", propKey: ["item"], label: "valueType", editType: "prop" },
        { type: "radio", tip: "是否禁用", key: "disabled", propKey: ["item"], label: "disabled", editType: "prop" }
      ],
      key: "cFormRadio",
      label: "Radio 单选框"
    })
  );
  registerConfig.register(dateFormType({ propsLabel: "", type: "daterange", label: "Daterange 日期范围选择器", key: "cFormDaterange" })); //itemValue: [],
  registerConfig.register(dateFormType({ propsLabel: "", type: "datetimerange", label: "Datetimerange 日期时间范围选择器", key: "cFormDatetimerange" }));
  registerConfig.register(dateFormType({ propsLabel: "", type: "monthrange", label: "Monthrange 月份范围选择器", key: "cFormMonthrange" }));
  registerConfig.register(dateFormType({ propsLabel: "", type: "date", label: "Date 日期选择器", key: "cFormDate" }));
  registerConfig.register(dateFormType({ propsLabel: "", type: "datetime", label: "Datetime 日期时间选择器", key: "cFormDatetime" }));
  registerConfig.register(
    formItemCreate({
      props: { item: { type: "time_picker", label: "标题" }, itemKey: String(new Date().getTime()) },
      settingRender: [
        { type: "input", tip: "值的格式", key: "value_format", propKey: ["item"], label: "value_format", editType: "normalProp" },
        { type: "input", tip: "显示的格式", key: "format", propKey: ["item"], label: "format", editType: "normalProp" }
      ],
      key: "cForm_time_picker",
      label: "Time_picker 时间选择器"
    })
  );
  registerConfig.register(
    formItemCreate({
      props: { item: { type: "time_picker", label: "标题", is_range: true }, itemKey: String(new Date().getTime()) },
      settingRender: [
        { type: "input", tip: "值的格式", key: "value_format", propKey: ["item"], label: "value_format", editType: "normalProp" },
        { type: "input", tip: "显示的格式", key: "format", propKey: ["item"], label: "format", editType: "normalProp" }
      ],
      key: "cForm_time_picker_two",
      label: "Time_picker_range 时间范围选择器"
    })
  );
  registerConfig.register(
    formItemCreate({
      props: { item: { type: "time", label: "标题" }, itemKey: String(new Date().getTime()) },
      settingRender: [
        { type: "input", tip: "开始时间", key: "start", propKey: ["item"], label: "start", editType: "normalProp" },
        { type: "input", tip: "结束时间", key: "end", propKey: ["item"], label: "end", editType: "normalProp" },
        { type: "input", tip: "提示", key: "placeholder", propKey: ["item"], label: "placeholder", editType: "prop" }
      ],
      key: "cFormTime",
      label: "Time 固定时间选择器"
    })
  );
  registerConfig.register(
    formItemCreate({
      props: { item: { type: "cascader", label: "级联选择器" }, itemKey: String(new Date().getTime()) },
      settingRender: [
        // { type: "input", tip: "配置选项", key: "props", propKey: ["item"], label: "props", editType: "normalProp" },
        // { type: "input", tip: "选项的数据源", key: "options", propKey: ["item"], label: "options", editType: "normalProp" },
        { type: "input", tip: "样式", key: "style", propKey: ["item"], label: "style", editType: "prop" }
      ],
      key: "cFormCascader",
      label: "Cascader 级联选择器"
    })
  );
  registerConfig.register(
    formItemCreate({
      props: { item: { type: "editor", label: "标题" }, itemKey: String(new Date().getTime()) },
      settingRender: [],
      label: "Editor 富文本编辑器",
      key: "cFormEditor",
      otherPreview: <div style={{ fontSize: "12px" }}>富文本编辑器</div>
    })
  );
  registerConfig.register(
    formItemCreate({
      props: { item: { type: "text", label: "标题" }, itemValue: "展示文字", itemKey: String(new Date().getTime()) },
      settingRender: [],
      key: "cFormText",
      label: "Text 文字展示"
    })
  );
  registerConfig.register(
    formItemCreate({
      props: { item: { type: "img", label: "标题" }, itemValue: "https://img1.baidu.com/it/u=2365615895,1663301197&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500", itemKey: String(new Date().getTime()) },
      settingRender: [],
      key: "cFormImg",
      label: "Img 图片展示"
    })
  );
  registerConfig.register(fileFormType("uFile", "上传文件", "cForm_uFile"));
  registerConfig.register(fileFormType("uVideo", "上传视频", "cForm_uVideo"));
  registerConfig.register(fileFormType("uAudio", "上传音频", "cForm_uAudio"));
  registerConfig.register(fileFormType("uImg", "上传单个图片", "cForm_uImg"));
  registerConfig.register(fileFormType("uImgs", "上传多个图片", "cForm_uImgs"));
}
